<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <img src="">
    </div>
    <div><button>点击获取狗的图片</button></div>
</body>
<script>
    let button = document.querySelector("button")
    let img = document.querySelector("img")
    button.addEventListener("click", getImg)
    // function getImg() {
    //     fetch('https://dog.ceo/api/breeds/image/random')
    //     .then((res) => {
    //         console.log(res)
    //         return res.json()
    //     })
    //     .then((json) => {
    //         console.log(json)
    //         return json.message
    //     })
    //     .then((message) => {
    //         img.src = message
    //     })
    // }
    async function getImg() {
       let res = await fetch('https://dog.ceo/api/breeds/image/random')
       let data=await res.json()
       img.src=data.message
    }
</script>

</html>

